Layout, Render 與 View Helper

2021 iThome 鐵人賽

DAY 21

自我挑戰組

Ruby on Rails JS系列第 21 篇

13th鐵人賽

阿君

2021-09-21 10:29:18

679 瀏覽

分享至

版型（Layout）
局部渲染（Partial Render）
View Helper
在上個章節介紹了 CRUD 的分解動作並實作了⼀個簡單的投票系統，接下來這個章
節要花點時間介紹在 Rails 專案 MVC 架構的 V。
版型 Layout
隨便打開⼀個在 app/views ⽬錄裡的檔案，例如上個章節的候選⼈列表⾴⾯：

<h1>候選⼈列表</h1>
<%= link_to "新增候選⼈", new_candidate_path %>
<table class="table">
<thead>
<tr>
<td>投票</td>
...[略]...
<td>
<%= link_to "編輯", edit_candidate_path(candidate) %>
<%= link_to "刪除", candidate_path(candidate), method: "de
lete", data: { confirm: "確認刪除" } %>
</td>
</tr>
<% end %>
</tbody>
</table>

在這個檔案（ index.html.erb ）裡，看不到任何 <html> 、 <title> 或<body>
之類的 HTML 標籤，但檢視實際網⾴的原始碼⼜都有，這是怎麼回事呢？
yield
以上⾯這個例⼦來說，Controller 在處理 View 的時候，並不只是單純的只取⽤
index.html.erb 這個檔案，⽽是會先取⽤ Layout 檔案的內容（預設是
app/views/layouts/application.html.erb ），然後把 index.html.erb 的
內容填到 <%= yield %> 裡。
版型的好處，就是不需要重複的寫⼀堆長得⼀樣的 HTML 標籤，例如每個⾴⾯的⾴
⾸跟⾴尾通常不會有什麼變化，這種就是版型適⽤的地⽅。讓我們看⼀下
app/views/layouts/application.html.erb 的內容：

<!DOCTYPE html>
<html>
<head>
<title>MyCandidates</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data
-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-tr
ack': 'reload' %>
</head>
<body>
<div class="container">
15 Layout，Render 與 View Helper
224
<%= yield %>
</div>
</body>
</html>

這裡有幾⾏需要說明⼀下：

csrf_meta_tags ⽅法會在⾴⾯上產⽣跟
兩個標籤，⽤途主要是確保網站較不容易受到 CSRF（Cross-site
request forgery）攻擊。
stylesheet_link_tag ⽅法會轉換成 CSS 的
標籤。
javascript_include_tag ⽅法會轉換成 JavaScript 的標籤。